<template>
  <div></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'chart-bar',
  props: {
    id: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {}
    },
    color: {
      type: String,
      default: 'rgba(130, 168, 226, 1)'
    }
  },
  data() {
    return {
      barChart: {},
      colorA: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.barChartInit()
    })
  },
  beforeDestroy() {
    if (!this.barChart) {
      return
    }
    this.barChart.dispose()
    this.barChart = null
  },
  watch: {
    // 监听数据变化
    data: {
      handler(newVal, oldVal) {
        if (this.barChart) {
          if (newVal) {
            this.data = newVal
            this.barChartInit()
          } else {
            this.data = oldVal
            this.barChartInit()
          }
        } else {
          this.$nextTick(() => {
            this.barChartInit()
          })
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  methods: {
    barChartInit() {
      const colorB = this.color // 柱状图 0%的颜色
      const rgbArr = colorB.split(',')
      const a = rgbArr[3].split(')')
      const colorA1 = (Number(a[0].replace(/\s+/g, ' ')) * 10 - 0.4 * 10) / 10 // 解决精度丢失
      const colorA2 = ' ' + colorA1 + ')'
      const rgbArr2 = [rgbArr[0], rgbArr[1], rgbArr[2], colorA2]
      this.colorA = rgbArr2.join(',') // 柱状图 100%的颜色
      // console.log(rgbArr2,this.colorA,'color')
      this.barChart = echarts.init(document.getElementById(this.id))
      const barChartData = {
        data: this.data.datas,
        name: this.data.name,
        month: this.data.month
      }
      this.barChart.setOption({
        xAxis: {
          name: '月',
          type: 'category',
          data: barChartData.month,
          axisTick: {
            show: false // 是否显示刻度
          },
          nameTextStyle: {
            color: '#62AFE5',
            fontSize: 14
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#A7A7A7', // x坐标轴的轴线颜色
              width: 1 // 这里是坐标轴的宽度,可以去掉
            }
          }
        },
        yAxis: {
          name: '购买本数',
          type: 'value',
          axisTick: {
            show: false // 是否显示刻度
          },
          nameTextStyle: {
            color: '#62AFE5',
            fontSize: 14
          },
          // y轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#A7A7A7', // y坐标轴的轴线颜色
              width: 1 // 这里是坐标轴的宽度,可以去掉
            }
          },
          // 控制网格线是否显示
          splitLine: {
            show: true, // 网格线是否显示
            //  改变样式
            lineStyle: {
              color: '#A7A7A7', // 修改网格线颜色
              type: 'dashed'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            return params[0].data + '本'
          }
        },
        series: [
          {
            name: barChartData.name,
            data: barChartData.data,
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              color: 'rgba(0, 211, 254, 1)',
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: this.color // 0% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: this.colorA // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        if (this.barChart) {
          this.barChart.resize()
        }
      })
    }
  }
}
</script>

<style></style>
